---
type: integration
title: '@astrojs/vue'
description: '@astrojs/vue 프레임워크 통합을 사용하여 Astro 프로젝트에서 컴포넌트 지원을 확장하는 방법 알아보기'
sidebar:
  label: Vue
githubIntegrationURL: 'https://github.com/withastro/astro/tree/main/packages/integrations/vue/'
category: renderer
i18nReady: true
---
import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro';
import Since from '~/components/Since.astro';

이 **[Astro 통합](/ko/guides/integrations-guide/)을** 통해 [Vue 3](https://vuejs.org/) 컴포넌트에 대한 렌더링 및 클라이언트 측 하이드레이션이 가능해집니다.

## 설치

Astro에는 공식 통합 설정을 자동화하는 `astro add` 명령이 포함되어 있습니다. 원하는 경우 통합을 [수동으로 설치](#수동-설치)할 수도 있습니다.

`@astrojs/vue`를 설치하려면 프로젝트 디렉터리에서 다음을 실행하고 프롬프트를 따르세요.

<PackageManagerTabs>
  <Fragment slot="npm">
  ```sh
  npx astro add vue
  ```
  </Fragment>
  <Fragment slot="pnpm">
  ```sh
  pnpm astro add vue
  ```
  </Fragment>
  <Fragment slot="yarn">
  ```sh
  yarn astro add vue
  ```
  </Fragment>
</PackageManagerTabs>

문제가 발생하면 [GitHub에 보고](https://github.com/withastro/astro/issues)하고 아래의 수동 설치 단계를 시도해 보세요.

### 수동 설치

우선, `@astrojs/vue` 패키지를 설치합니다.

<PackageManagerTabs>
  <Fragment slot="npm">
  ```sh
  npm install @astrojs/vue
  ```
  </Fragment>
  <Fragment slot="pnpm">
  ```sh
  pnpm add @astrojs/vue
  ```
  </Fragment>
  <Fragment slot="yarn">
  ```sh
  yarn add @astrojs/vue
  ```
  </Fragment>
</PackageManagerTabs>

대부분의 패키지 관리자는 관련 피어 종속성도 설치합니다. Astro를 시작할 때 `Cannot find package 'vue'` (또는 이와 유사한) 경고가 표시되면 Vue를 설치해야 합니다.

<PackageManagerTabs>
  <Fragment slot="npm">
  ```sh
  npm install vue
  ```
  </Fragment>
  <Fragment slot="pnpm">
  ```sh
  pnpm add vue
  ```
  </Fragment>
  <Fragment slot="yarn">
  ```sh
  yarn add vue
  ```
  </Fragment>
</PackageManagerTabs>

그런 다음 `integrations` 속성을 사용하여 `astro.config.*` 파일에 통합을 적용합니다.

```js ins={2} ins="vue()" title="astro.config.mjs"
import { defineConfig } from 'astro/config';
import vue from '@astrojs/vue';

export default defineConfig({
  // ...
  integrations: [vue()],
});
```

## 시작하기

Astro에서 첫 번째 Vue 컴포넌트를 사용하려면 [UI 프레임워크 문서](/ko/guides/framework-components/#프레임워크-컴포넌트-사용)로 이동합니다. 다음을 확인할 수 있습니다.

* 📦 프레임워크 컴포넌트가 로드되는 방식,
* 💧 클라이언트 측 하이드레이션 옵션,
* 🤝 프레임워크를 함께 혼합하고 중첩할 수 있는 기회

## 문제 해결

도움이 필요하면 [Discord](https://astro.build/chat)의 `#support` 채널을 확인합니다. 우리의 친절한 지원팀 멤버들이 도와드리겠습니다!

통합에 대한 자세한 내용은 [Astro 통합 문서](/ko/guides/integrations-guide/)를 확인하세요.

## 기여

이 패키지는 Astro의 코어 팀에서 유지관리 합니다. 문제를 보고하거나 PR을 제출하는 것은 언제든 환영합니다!

## 옵션

이 통합은 `@vitejs/plugin-vue` 의 도움을 받습니다. Vue 컴파일러를 커스터마이징 하기 위해서는, 통합에 옵션을 제공할 수 있습니다. 자세한 사항은 `@vitejs/plugin-vue` [문서](https://www.npmjs.com/package/@vitejs/plugin-vue) 를 참조합니다.

```js title="astro.config.mjs"
import { defineConfig } from 'astro/config';
import vue from '@astrojs/vue';

export default defineConfig({
  // ...
  integrations: [
    vue({
      template: {
        compilerOptions: {
          // ion- 으로 시작하는 모든 태그를 맞춤 요소로 처리합니다.
          isCustomElement: (tag) => tag.startsWith('ion-'),
        },
      },
      // ...
    }),
  ],
});
```

### `appEntrypoint`

<p>

**타입:** `string`<br />
<Since pkg="@astrojs/vue" v="1.2.0" />
</p>

`appEntrypoint` 옵션을 루트 상대 가져오기 지정자로 설정하여 (예: `appEntrypoint: "/src/pages/_app"`) Vue `app` 인스턴스를 확장할 수 있습니다.

이 파일의 기본 내보내기는 랜더링 전에 Vue `app` 인스턴스를 전달받는 함수여야 하며, [사용자 정의 Vue 플러그인](https://vuejs.org/guide/reusability/plugins.html), `app.use` 및 고급 사용 사례를 위한 기타 사용자 정의를 허용합니다.


```js title="astro.config.mjs"
import { defineConfig } from 'astro/config';
import vue from '@astrojs/vue';

export default defineConfig({
  // ...
  integrations: [vue({ appEntrypoint: '/src/pages/_app' })],
});
```

```ts title="src/pages/_app.ts"
import type { App } from 'vue';
import i18nPlugin from 'my-vue-i18n-plugin';

export default (app: App) => {
  app.use(i18nPlugin);
};
```

### `jsx`

<p>

**타입:** `boolean | object`<br />
<Since pkg="@astrojs/vue" v="1.2.0" />
</p>

`jsx: true`를 설정하여 Vue JSX를 사용할 수 있습니다.

```js title="astro.config.mjs"
import { defineConfig } from 'astro/config';
import vue from '@astrojs/vue';

export default defineConfig({
  // ...
  integrations: [vue({ jsx: true })],
});
```

이렇게 하면 Vue 및 Vue JSX 컴포넌트 모두 렌더링이 가능합니다. Vue JSX 컴파일러를 사용자정의 하려면, 옵션을 객체 대신 Boolean 값으로 전달합니다. 자세한 사항은 `@vitejs/plugin-vue-jsx` [문서](https://www.npmjs.com/package/@vitejs/plugin-vue-jsx) 참조합니다.

```js title="astro.config.mjs"
import { defineConfig } from 'astro/config';
import vue from '@astrojs/vue';

export default defineConfig({
  // ...
  integrations: [
    vue({
      jsx: {
        // ion- 으로 시작하는 모든 태그를 맞춤 요소로 처리합니다.
        isCustomElement: (tag) => tag.startsWith('ion-'),
      },
    }),
  ],
});
```

### `devtools`

<p>

**타입:** `boolean | object`<br />
<Since pkg="@astrojs/vue" v="4.2.0" />
</p>

`devtools: true`가 포함된 객체를 `vue()` 통합 구성에 전달하여 개발 모드에서 [Vue DevTools](https://devtools-next.vuejs.org/)를 활성화할 수 있습니다.

```js title="astro.config.mjs"
import { defineConfig } from 'astro/config';
import vue from '@astrojs/vue';

export default defineConfig({
  // ...
  integrations: [vue({ devtools: true })],
});
```

#### Vue DevTools 사용자 정의

<p><Since pkg="@astrojs/vue" v="4.3.0" /></p>

더 많은 사용자 정의를 위해 [Vue DevTools Vite 플러그인](https://devtools-next.vuejs.org/guide/vite-plugin#options)이 지원하는 옵션을 전달할 수 있습니다. (참고: `appendTo`는 지원되지 않습니다.)

예를 들어 Visual Studio Code를 사용하지 않는 경우 `launchEditor`를 원하는 편집기로 설정할 수 있습니다.

```js title="astro.config.mjs"
import { defineConfig } from "astro/config";
import vue from "@astrojs/vue";

export default defineConfig({
  // ...
  integrations: [
    vue({
      devtools: { launchEditor: "webstorm" },
    }),
  ],
});
```
